<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-focus>
    <input type="text" v-myfocus>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 全局自定义指令
    // Vue.directive('指令的名称','指令配置对象')
    // 参数1：指令的名称，不包含v-，但是在使用指令的时候需要加上v-
    // 参数2：指令配置对象，固定属性 inserted 指定的一个函数，
    //      1. 该函数会在通过指令标记的元素，创建完毕之后执行
    //      2. 该函数有一个默认参数 el 指的是使用这个指令的元素
    Vue.directive('focus',{
      inserted (el) {
        // 获取焦点
        el.focus()
      }
    })


    const vm = new Vue({
      el: '#app',
      // 局部自定义指令
      // vue配置对象提供了一个选项：directives 对应 对象
      directives: {
        // 属性名称(指令的名称)：属性的值(指令的配置对象)
        myfocus: {
          inserted (el) {
            el.style.height = '50px'
            el.focus()
          }
        }
      }
    })
  </script>
</body>
</html>